<template>
    <div id="login">
        <!--<div class="loginConbox">-->
        <!--<div class="loginBox">-->
        <div class="loginCon">
            <div class="headertitle">YLB易留帮管理后台系统</div>
            <el-card shadow="always" class="login-module" v-if="smdl">
                <div slot="header" class="clearfix formTitlt">
                    <span>密码登录</span>
                    <span class="titIconbox">
              <i class="iconfont xu-saomadenglu2 fa-lg iconcolor"></i>
              <i class="iconfont xu-saomadenglu01 el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
            </span>
                </div>
                <el-form :model="loginForm" status-icon label-width="100px" class="demo-ruleForm">
                    <el-form-item>
                        <el-input type="text" v-model="loginForm.username" auto-complete="off"
                                  placeholder="请输入登录账号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginForm.password" auto-complete="off"
                                  placeholder="请输入登录密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="subBtn" type="primary" @click="submitForm">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </div>
    </div>
    <!--</div>-->
    <!--</div>-->
</template>

<script>
    export default {
        data() {
            return {
                smdl: true,
                loginForm: {
                    username: 'vue-xuadmin',
                    password: '123456'
                }
            }
        },
        methods: {
            submitForm() {
                let that = this;
                if (this.loginForm.username === '' || this.loginForm.password === '') {
                    this.$message({
                        showClose: true,
                        message: '账号或密码不能为空',
                        type: 'error'
                    });
                    return false
                } else {
                    // 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准
                    that.$store.dispatch('setToken', that.loginForm.username).then(() => {
                        that.$router.push({path: '/home'})
                    }).catch(res => {
                        that.$message({
                            showClose: true,
                            message: res,
                            type: 'error'
                        })
                    })
                }
            },
            message() {
                const h = this.$createElement;
                this.$notify({
                    title: '账号密码',
                    message: h('i', {style: 'color: teal'}, '账号密码可以随意填写，为了测试效果填写的账号将会被存储为临时假 token'),
                    duration: 6000
                });
            },
        },
        mounted() {
            // this.message()
        }
    }
</script>

<style lang="scss">
    #login {
        height: 100%;
        background-color: #2d3a4b;
    }
    .loginCon {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        .headertitle{
            text-align: center;
            color: #fff;
            font-size: 22px;
            line-height: 80px;
        }
        .el-card__header {
            border-bottom: 0px;
        }
        .title {
            font-size: 36px;
            font-weight: 600;
            color: #ffffff;
            width: 500px;
            float: left;
            margin-top: 0px;
            &:first-child {
                font-size: 34px;
                margin-top: 50px;
                margin-bottom: 30px;
            }
        }
        .login-module {
            width: 400px;
            height: 310px;
            border: none;

            .formTitlt {
                font-size: 18px;
                font-weight: 400;

                .titIconbox {
                    float: right;

                    .pointer {
                        cursor: pointer;
                    }
                }
            }

            .smalltxt {
                text-align: right;

                .a {
                    text-decoration: none;
                    color: #999999;
                    font-size: 12px;
                    margin-left: 8px;
                }
            }
        }

        .el-form-item__content {
            margin-left: 0px !important;

            .subBtn {
                width: 100%;
            }
        }
    }
</style>
